<template>
  <a-card class="standard-table" :size="size" :title="title">
    <template #extra>
      <a-flex>
        <a-popconfirm placement="bottomRight" icon="" :showCancel="false" @openChange="openChange">
          <template #okButton></template>
          <template #description> 
            <div class="setting-list">
              <a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="onCheckAllChange" class="checkAll">列展示 / 排序</a-checkbox>
              <Container @drop="onDrop">            
                <Draggable v-for="item in column_list" :key="item.dataIndex">
                  <a-flex align="center" class="draggable-item" :style="'height: '+setting_item_height+'px;'">
                    <a-icon name="HolderOutlined"></a-icon>
                    <a-checkbox v-model:checked="item.checked" @change="onCheckChange" class="draggable-item-checkbox">{{item.title}}</a-checkbox>
                  </a-flex>
                </Draggable>
              </Container>
            </div>
            <div class="mask" :style="'height: '+mask_height+'px;'"></div>
          </template>
          <a-icon name="SettingOutlined" :size="18"></a-icon>
        </a-popconfirm>
        <slot name="extra"></slot>
      </a-flex>
    </template>
    <slot name="search"></slot>
    <a-table :columns="column_list_show" :data-source="data">
      <template #bodyCell="{column, record}">
        <slot :name="column?column.dataIndex:'default'" v-bind="record"></slot>
      </template>
    </a-table>
  </a-card>
</template>

<script setup>
import { Container, Draggable } from "vue3-smooth-dnd";
import { computed, defineProps, ref } from "vue"

const props = defineProps({
  title: {
    type: String,
    default: '基础列表'
  },
  size: {
    type: String,
    default: 'default'
  },
  columns: {
    type: Array,
    default: () => []
  },
  columnCustom: {
    type: Array,
    default: () => []
  },
  dataSource: {
    type: Array,
    default: () => []
  },
  showSetting: {
    type: Boolean,
    default: true
  }
})

// 设置columns控制列表
const column_list = ref(props.columns.map(item => {
  let status = true
  if (props.columnCustom.length > 0 && !props.columnCustom.find(dataIndex => dataIndex == item.dataIndex)) {
    status = false
  }
  return Object.assign(item, {
    checked: status
  })
}))
// 设置dataSource
const data = ref(props.dataSource)
// 设置实际展示的columns
const column_list_show = computed(() => {
  let arr = column_list.value.filter(e => e.checked)
  return arr
})
//设置checkall
const checkAll = ref(true)
const indeterminate = ref(false)
const onCheckAllChange = (e) => {
  column_list.value.forEach(item => {
    item.checked = e.target.checked
  });
  indeterminate.value = false
}

// columns控制列表与checkall联动
const onCheckChange = () => {
  let checked_num = 0
  column_list.value.forEach(item => { 
    if (item.checked) {
      checked_num++;
    }
  })
  if (checked_num == column_list.value.length) {
    indeterminate.value = false
    checkAll.value = true
  } else if (checked_num == 0) {
    indeterminate.value = false
    checkAll.value = false
  } else {
    indeterminate.value = true
    checkAll.value = false
  }
}

// 配置占位div高度
const setting_item_height = 30
const mask_height = computed(() => {
  return column_list.value.length * setting_item_height + 20 // list高度 + checkAll高度和bottom（32） - 外围padding（24） + 冗余高度（12）
})

// 配置拖拽功能
const onDrop = (dropResult) => {
  column_list.value = applyDrag(column_list.value, dropResult);
}
const applyDrag = (arr, dragResult) => {
  const { removedIndex, addedIndex, payload } = dragResult;

  if (removedIndex === null && addedIndex === null) return arr;
  const result = [...arr];
  let itemToAdd = payload;
  
  if (removedIndex !== null) {
    itemToAdd = result.splice(removedIndex, 1)[0];
  }
  if (addedIndex !== null) {
    result.splice(addedIndex, 0, itemToAdd);
  }
  return result;
}


</script>

<style scoped>
.card-extra{

}
.mask{
  width: 154px;
}
.setting-list{
  position: absolute;
  width: 100%;
  left: -22px;
  top: -8px;
}
.draggable-item{
  cursor: pointer;
}
.checkAll{
  font-weight: 700;
  margin-bottom: 10px;
  height: 22px;
}
.draggable-item-checkbox{
  margin-left: 6px;
}
</style>